<template>
  <div>
    <div class="header">
      <div class="header_box">
        <div class="header_info">
          <div class="header_top" @click="$router.push('/userinfo/setup')">
            <!-- icon -->
            <div class="icon">
              <!-- 未登录头像 -->
              <span v-if="!info">
                <img src="../../../assets/img/my/bt_head.png" alt="">
              </span>
              <!-- 登录后获取头像 -->
              <span v-else>
                <!-- 已上传头像 -->
                <img v-if="userinfo.user_icon" :src="userinfo.user_icon" alt="">
                <!-- 未上传头像 -->
                <img v-else src="../../../assets/img/my/bt_head_color.png" alt="">
              </span>
            </div>
            <!-- vip带皇冠 -->
            <img v-if="userinfo.vip_level > 0" class="icon_vipuser" src="../../../assets/img/my/icon_vipuser.png" alt="">
            <!-- info -->
            <div class="user_info">
              <!-- 未登录 -->
              <div v-if="!info">
                <h3>请点击登陆/注册~</h3>
                <span>欢迎您~</span>
              </div>
              <!-- 登陆获取个人信息 -->
              <div v-else>
                <div class="user_logo_box">
                  <h3 :style="{color: userinfo.vip_level === '0' ? '' : '#e4a543'}">{{userinfo.user_nickname}}</h3>
                  <div class="user_logo" v-if="userinfo.vip_level > 0">
                    <span v-if="userinfo.vip_level >= '2'">PLUS会员</span>
                    <span v-else-if="userinfo.vip_level === '1'">普通会员</span>
                  </div>
                </div>
                <div class="user_mob_box">用户名：{{userinfo.username}}</div>
                <div>
                  <span v-if="userinfo.mobile === null">绑定手机：未绑定</span>
                  <span v-else>手机号码：{{userinfo.mobile}}</span>
                </div>
              </div>
            </div>
            <!-- right -->
            <img class="ic_right" src="../../../assets/img/my/ic_right.png" alt="">
          </div>
          <div class="header_down">
            <img src="../../../assets/img/my/color_overlay.png" alt="">
            <div class="text_message">
              <span>提示：若未绑定手机，则用户名为唯一登陆凭证，请牢记!</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    userinfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      info: true,
    }
  },
}
</script>

<style lang="less" scoped>
.header {
  position: relative;
  width: 10rem;
  height: 4.493333rem;
}
.header_box {
  box-sizing: border-box;
  width: 10rem;
  height: 4.026667rem;
  background: linear-gradient(0deg, #FF5543, #FF9600);
}
.header_info {
  width: 9.146667rem;
  height: 3.6rem;
  background: #fff;
  border-radius: .266667rem;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.header_top {
  position: relative;
  box-sizing: border-box;
  padding: .52rem .266667rem .266667rem;
  height: 2.666667rem;
  font-size: .346667rem;
  display: flex;
  align-items: center;
  .icon_vipuser {
    position: absolute;
    top: .093333rem;
    left: .133333rem;
    width: 2.2rem;
    height: 2.453333rem;
  }
  .icon {
    width: 1.866667rem;
    height: 1.866667rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: .266667rem;
    img {
      width: 1.866667rem;
      height: 1.866667rem;
    }
  }
  .user_info {
    flex: 1;
    color: #999999;
    h3 {
      font-size: .426667rem;
      color: #222222;
      font-weight: 500;
      margin: 0;
      margin-right: .266667rem;
    }
  }
  .ic_right {
    width: .226667rem;
    height: .413333rem;
  }
}

.user_mob_box {
  padding-top: .4rem;
}

.user_logo_box {
  display: flex;
  align-items: center;
}

.user_logo {
  padding: 0 .133333rem;
  height: .4rem;
  border-radius: .2rem;
  font-size: .266667rem;
  color: #ffffff;
  text-align: center;
  line-height: .4rem;
  background: linear-gradient(135deg,#f1c973 13%, #e4a543 93%)
}

.header_down {
  height: .933333rem;
  background: #FFEFEF;
  font-size: .293333rem;
  color: #FF5543;
  display: flex;
  border-radius: 0 0 .266667rem .266667rem;
  img {
    display: inline-block;
    margin: .253333rem .16rem .253333rem .253333rem;
    width: .426667rem;
    height: .426667rem;
  }
  .text_message {
    display: inline-block;
    line-height: .933333rem;
  }
}
</style>